<template>
	<view class="box">
		<view class="headbox">
			<image src="../../static/logo.png" mode="" class="money"></image>
			<view class="title">
				今日获得
			</view>
			<view class="num">
				5000
			</view>
			<view class="share">
				<image src="../../static/zhuanf.png" mode=""></image>
				<text>分享好友赚金币</text>
			</view>
		</view>
		<view class="centerbox">
			<view class="leftbox">
				<view class="name">
					累计获得
				</view>
				<view class="num">
					1000
				</view>
			</view>
			<view class="leftbox">
				<view class="name">
					累计获得
				</view>
				<view class="num">
					1000
				</view>
			</view>
		</view>
		<view class="mxbox">
			<view class="title">
				金币明细
			</view>
			<Basedatalist></Basedatalist>
		</view>

	</view>
</template>

<script>
	import Basedatalist from "../../components/Basedatalist/index.vue"
	export default{
		data(){
			return{
				
			}
		},
		components:{
			Basedatalist
		}
	}
</script>

<style scoped lang="scss">
	.box {
		background-color: #fff;

		.headbox {
			width: 100%;
			height: 218rpx;
			background-color: #f73f33;
			padding-top: 14rpx;
			box-sizing: border-box;
			position: relative;

			.share {
				position: absolute;
				top: 14rpx;
				right: 30rpx;
				display: flex;
				align-items: center;

				image {
					width: 23rpx;
					height: 23rpx;
				}

				text {
					font-family: SourceHanSansCN-Regular;
					font-size: 22rpx;
					color: #ffffff;
					margin-left: 10rpx;
				}
			}

			.money {
				display: block;
				margin: 0 auto;
				width: 64rpx;
				height: 68rpx;
			}

			.title {
				text-align: center;
				font-family: SourceHanSansCN-Regular;
				font-size: 24rpx;
				color: #ffffff;
				margin-top: 31rpx;
			}

			.num {
				font-family: SourceHanSansCN-Bold;
				font-size: 32rpx;
				color: #ffffff;
				font-weight: 700;
				margin-top: 10rpx;
				text-align: center;
			}
		}

		.centerbox {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 20rpx;
			padding-bottom: 28rpx;
			border-bottom: 1rpx solid #d8d8d8;

			.leftbox {
				text-align: center;

				.name {
					font-family: SourceHanSansCN-Regular;
					font-size: 28rpx;
					color: #444444;
				}

				.num {
					font-family: SourceHanSansCN-Regular;
					font-size: 32rpx;
					color: #f73f33;
					margin-top: 10rpx;
				}
			}
		}

		.mxbox {
			padding: 44rpx 34rpx;
			box-sizing: border-box;

			.title {
				font-family: SourceHanSansCN-Regular;
				font-size: 30rpx;
				color: #000000;
				margin-bottom: 15rpx;
				font-weight: 700;
			}
		}
	}
</style>
